<template>
  <div class="nearby">
    <h3>附近店铺</h3>
    <div class="nearby__item" v-for="(item, index) in nearbyList" :key="item.id">
      <img class="nearby__item__img" :src="item.imgUrl" />
      <div class="nearby__content">
        <div class="nearby__tit">{{ item.title }}</div>
        <div class="nearby__tags">
          <span v-for="tag in item.tags" :key="tag">{{ tag }}</span>
        </div>
        <p class="nearby__highlight">{{ item.desc }}</p>
        <div class="nearby__content__border"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import nearImg from '../../assets/walmart.png'
import samImg from '../../assets/sam.png'

const nearbyList = reactive([
  { id: 1, title: '沃尔玛', imgUrl: nearImg, tags: ['月售1万+', '起送¥0', '基础运费¥5'], desc: 'VIP尊享满89元减4元运费券（每月3张）' },
  { id: 1, title: '山姆会员商店', imgUrl: samImg, tags: ['月售2千+', '起送¥0', '基础运费¥5'], desc: '联合利华洗护满10减5' }
])
</script>

<style lang="scss" scoped>
.nearby {
  > h3 {
    margin: 0.16rem 0 0.14rem;
    line-height: 0.25rem;
    font-size: 0.18rem;
  }
  .nearby__item {
    display: flex;
    margin-bottom: 0.12rem;
    &__img {
      outline: none;
      border: none;
      width: 0.56rem;
      height: 0.56rem;
    }
    .nearby__content {
      flex: 1;
      margin: 0 0 0 0.16rem;
      font-size: 0.13rem;
      .nearby__tit {
        font-size: 0.16rem;
      }
      .nearby__tags {
        margin: 0.08rem 0;
        line-height: 0.18rem;
        > span {
          margin-right: 0.16rem;
        }
      }
      .nearby__highlight {
        color: $hightlight-fontColor;
        margin: 0;
      }
      &__border {
        margin-top: 0.12rem;
        height: 0.01rem;
        background-color: $content-bgColor;
      }
    }
  }
}
</style>
